<template>
    <li :class="{ completed: todo.done, editing: editing }" class="todo">
        <div class="view">
            <input
                    :checked="todo.done"
                    class="toggle"
                    type="checkbox"
                    @change="toggleTodo( todo)"
            >
            <label @dblclick="editing = true" v-text="todo.text" />
            <button class="destroy" @click="deleteTodo( todo )" />
        </div>
        <input
                v-show="editing"
                v-focus="editing"
                :value="todo.text"
                class="edit"
                @keyup.enter="doneEdit"
                @keyup.esc="cancelEdit"
                @blur="doneEdit"
        >
    </li>
</template>

<script>
    export default {
        name: 'Todo',
        directives: {
            focus(el, { value }, { context }) {
                if (value) {
                    context.$nextTick(() => {
                        el.focus()
                    })
                }
            }
        },
        props: {
            todo: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        data() {
            return {
                editing: false
            }
        },
        methods: {
            deleteTodo(todo) {
                this.$emit('deleteTodo', todo)
            },
            editTodo({ todo, value }) {
                this.$emit('editTodo', { todo, value })
            },
            toggleTodo(todo) {
                this.$emit('toggleTodo', todo)
            },
            doneEdit(e) {
                const value = e.target.value.trim()
                const { todo } = this
                if (!value) {
                    this.deleteTodo({
                        todo
                    })
                } else if (this.editing) {
                    this.editTodo({
                        todo,
                        value
                    })
                    this.editing = false
                }
            },
            cancelEdit(e) {
                e.target.value = this.todo.text
                this.editing = false
            }
        }
    }
</script>
